<template>
  <div class="page-personage">
	  <div class="conter" v-for="item in types" :key="item._id" to=''>
		  	<div class="logo" :style="item.icon" ></div>
			<div class="input input1">
				<input type="text" class="input_1" autocomplete="off" placeholder="QQ号码/手机/邮箱">
			</div>
			<div class="input input2">
				<input type="password" class="input_1" maxlength="16"  autocorrect="off" placeholder="请输入你的QQ密码">
			</div>
			<div class="dl">
				<p class="dl1"><a href="javascript::">{{item.title}}</a></p>
				<p class="dl2"><a href="javascript::">{{item.title1}}</a></p>
				<div class="password">
					<a href="javascript::" class="pw1">{{item.title2}}</a>
					<a href="javascript::" class="pw2">{{item.title3}}</a>
				</div>
			</div>
	  </div>
  </div>
</template>
<style lang="less" scoped>
.page-personage {
	width:375px;
	height:667px;
	text-align: center;
	background:#eee;
	.conter {
		width:320px;
		height:500px;
		// border:solid 1px;
		margin-left: 27px;
		.logo {
			width:244px; 
			height:100px;
			background:no-repeat center;
			background-size: contain;
			padding-top: 45px;
			margin-left: 50px;
			margin-bottom: 15px;
		}
		.input1 {
				border-radius: 8px 8px  0 0;
			}
		
		.input2 {
				margin-top: 1px;
				border-radius: 0 0 8px 8px;
			}
		.input {
			width: 290px;
			height:45px;
			font-size: 16px;
			margin-left: 15px;
			background: #fff;
			input {
				outline: none;
				border: 0;
				background-color: rgba(0, 0, 0 ,0);
			}
			input::-webkit-input-placeholder{
				color: #AAAAAA;
				font-size:16px;
			}
			.input_1 {
				width: 270px;
				height: 42px;
				margin-left: 7px;
				
			}
		}
		.dl {
			text-align: center;
			.dl1 {
				background: #146FDF;
				a {
					color: #fff;
				}
			}
			.dl2 {
				background: #E7E7E7;
				border: solid 1px #C1D2E6;
				a {
					color: #3582E0;
				}
			}
			a{
				text-decoration: none;
				}
			p {
				width: 290px;
				height: 44px;
				margin-left: 15px;
				margin-top: 15px;
				border-radius: 8px;
				line-height: 44px;
			}
			.password {
				margin-top: 20px;
				float: left;
				.pw1{
					color: #246183;
					margin-left: 15px;
                }
				.pw2{
					color: #246183;
					margin-left:131px;
                }
			}
		}
	}
}
</style>
<script>
export default {
	data() {
		return {
			types:[
				{id:0, title:'登 录', title1:'一键登录', title2:'忘了密码？', title3:'注册新账户',
				icon:{
					backgroundImage:'url(' + require('../../public/static/img/logo100.png') + ')'
				}}
			]
		}
	}
}
</script>